<template>
	<view class="device-container">
		<!-- 顶部卡片 -->
		<view class="overview-card">
			<!-- 卡片上部分 -->
			<view class="card-header" @tap="goToDeviceList('所有设备', null, null)">
				<text class="header-title">所有设备 &nbsp;&nbsp;{{ totalActive + totalInactive }}</text>
				<image src="/static/images/arrow-right.svg" class="arrow-icon" mode="aspectFit"></image>
			</view>
			
			<!-- 卡片下部分 -->
			<view class="status-row">
				<!-- 活跃设备 -->
				<view class="status-item" @tap="goToDeviceList('所有设备', null, true)">
					<view class="status-left">
						<image src="/static/images/ic_devices_other.png" class="status-icon" mode="aspectFit"></image>
						<text class="status-text active">在线</text>
						<text class="status-count active">{{ totalActive }}</text>
					</view>
					<view class="status-right-1 active-arrow">
						<image src="/static/images/arrow-right-2.svg" class="arrow-icon" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 分割线 -->
				<view class="divider"></view>
				
				<!-- 非活跃设备 -->
				<view class="status-item" @tap="goToDeviceList('所有设备', null, false)">
					<view class="status-left">
						<image src="/static/images/device.png" class="status-icon inactive" mode="aspectFit"></image>
						<text class="status-text">离线</text>
						<text class="status-count">{{ totalInactive }}</text>
					</view>
					<view class="status-right-2">
						<image src="/static/images/arrow-right-2.svg" class="arrow-icon" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 设备配置列表 -->
		<view class="device-list">
			<view class="device-grid">
				<view 
					class="device-card" 
					v-for="(type, index) in deviceTypes" 
					:key="index"
				>
					<!-- 图片 -->
					<view class="icon-section" @tap="goToDeviceList(type.name, type.id, null)">
						<view 
							class="icon-wrapper"
							:style="{
								backgroundImage: `url('${type.image}')`
							}"
						></view>
					</view>
					
					<!-- 名称 -->
					<view class="name-section" @tap="goToDeviceList(type.name, type.id, null)">
						<view class="name-wrapper">
							<text class="device-name">{{ type.name }}</text>
						</view>
					</view>
					
					<!-- 状态信息 -->
					<view class="card-bottom">
						<!-- 活跃状态 -->
						<view class="status-row" @tap="goToDeviceList(type.name, type.id, true)">
							<view class="status-left">
								<image src="/static/images/ic_devices_other.png" class="status-icon" mode="aspectFit"></image>
								<text class="status-text active">在线</text>
								<text class="status-count active">{{ type.activeCount }}</text>
							</view>
							<view class="status-right-1">
								<image src="/static/images/arrow-right-2.svg" class="arrow-icon" mode="aspectFit"></image>
							</view>
						</view>
						
						<!-- 分隔线 -->
						<view class="status-divider"></view>
						
						<!-- 非活跃状态 -->
						<view class="status-row" @tap="goToDeviceList(type.name, type.id, false)">
							<view class="status-left">
								<image src="/static/images/device.png" class="status-icon inactive" mode="aspectFit"></image>
								<text class="status-text">离线</text>
								<text class="status-count">{{ type.inactiveCount }}</text>
							</view>
							<view class="status-right-1">
								<image src="/static/images/arrow-right-2.svg" class="arrow-icon" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style>
.device-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 30rpx;
}

.overview-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 30rpx;
	border-bottom: 1px solid #f0f0f0;
	margin: 0 -30rpx;
	padding: 0 30rpx 30rpx;
}

.header-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.status-row {
	display: flex;
	margin-top: 30rpx;
	gap: 0;
	position: relative;
}

.status-item {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
}

.status-item:first-child .status-left {
	margin-left: -30rpx;  /* 增加负边距从 -10rpx 到 -20rpx */
}

.status-left {
	display: flex;
	align-items: center;
	gap: 20rpx;  /* 增加间距，从 12rpx 改为 20rpx */
}

.status-right-0 {
	display: flex;
	align-items: center;
	gap: 20rpx;  /* 增加间距 */
}

.status-right-1 {
	display: flex;
	align-items: center;
	gap: 20rpx;  /* 增加间距 */
}

.status-right-2 {
	display: flex;
	align-items: center;
	gap: 20rpx;  /* 增加间距 */
	margin-right: -30rpx;
}

.status-icon {
	width: 32rpx;
	height: 32rpx;
}

.status-icon.active {
	color: #4CAF50;
}

.status-icon.inactive {
	color: #9E9E9E;
}

.status-text {
	font-size: 28rpx;
	color: #333;
}

.status-count {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-right: 20rpx;  /* 增加右边距，从 12rpx 改为 20rpx */
}

.arrow-icon {
	width: 24rpx;
	height: 24rpx;
	opacity: 0.6;
}

.device-list {
	padding: 0;
}

.device-grid {
	display: grid;
	grid-template-columns: repeat(2, calc(50% - 10rpx));  /* 计算每列宽度 */
	gap: 20rpx;  /* 元素之间的间距 */
	justify-content: space-between;  /* 两端对齐 */
}

.device-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.icon-section {
	display: flex;
	justify-content: center;
	padding-bottom: 16rpx;
}

.icon-wrapper {
	width: 80rpx;
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.name-section {
	padding: 24rpx 0;  /* 增加上下内边距 */
	position: relative;
	margin: 0 -20rpx;
	padding: 24rpx 20rpx;  /* 同时更新水平内边距 */
}

/* 上边框线 */
.name-section::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background-color: #f0f0f0;
}

/* 下边框线 */
.name-section::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #f0f0f0;
}

.name-wrapper {
	display: flex;
	justify-content: center;
	padding: 8rpx 0;  /* 为名称容器添加上下内边距 */
}

.device-name {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	line-height: 1.4;
	font-weight: 500;  /* 添加字体粗细 */
}

.card-bottom {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
}

.status-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.status-right-1, .status-right-2 {
	display: flex;
	align-items: center;
}

.status-icon {
	width: 32rpx;
	height: 32rpx;
}

.status-icon.inactive {
	color: #9E9E9E;
}

.status-text {
	font-size: 28rpx;
	color: #333;
}

.status-count {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-right: 20rpx;
}

.arrow-icon {
	width: 24rpx;
	height: 24rpx;
	opacity: 0.6;
}

.divider {
	width: 1px;
	height: 40rpx;
	background-color: #f0f0f0;
	align-self: center;
	position: relative;
}

/* 添加上延伸线 */
.divider::before {
	content: '';
	position: absolute;
	width: 1px;
	height: 30rpx;  /* 与上边框的距离 */
	background-color: #f0f0f0;
	top: -30rpx;
	left: 0;
}

/* 添加下延伸线 */
.divider::after {
	content: '';
	position: absolute;
	width: 1px;
	height: 30rpx;  /* 与下边框的距离 */
	background-color: #f0f0f0;
	bottom: -30rpx;
	left: 0;
}

.status-divider {
	height: 1px;
	background-color: #f0f0f0;
	margin: 0 -20rpx;  /* 延伸到边缘 */
	position: relative;
}

/* 添加左延伸线 */
.status-divider::before {
	content: '';
	position: absolute;
	height: 1px;
	width: 20rpx;
	background-color: #f0f0f0;
	left: -20rpx;
	top: 0;
}

/* 添加右延伸线 */
.status-divider::after {
	content: '';
	position: absolute;
	height: 1px;
	width: 20rpx;
	background-color: #f0f0f0;
	right: -20rpx;
	top: 0;
}

/* 只为活跃设备的箭头添加特定样式 */
.active-arrow {
	margin-right: 20rpx;  /* 添加右边距让箭头往左移 */
}

/* 在线状态的文字和数字颜色 */
.status-text.active,
.status-count.active {
	color: #058C05;  /* 修改为指定的绿色 */
}
</style>

<script>
import request from '@/utils/request.js'

export default {
	data() {
		return {
			deviceTypes: [],
			totalActive: 0,
			totalInactive: 0,
			pageSize: 10,
			page: 0,
			sortProperty: 'createdTime',
			sortOrder: 'DESC'
		}
	},
	
	onLoad() {
		this.fetchDeviceProfiles()
	},
	
	methods: {
		// 获取设备配置列表
		async fetchDeviceProfiles() {
			try {
				const result = await request.get('/api/deviceProfiles', {
					pageSize: this.pageSize,
					page: this.page,
					sortProperty: this.sortProperty,
					sortOrder: this.sortOrder
				})
				
				if (result && result.data) {
					// 处理设备配置数据
					const profiles = result.data.map(profile => ({
						name: profile.name,
						activeCount: 0,  // 初始化为 0
						inactiveCount: 0,  // 初始化为 0
						id: profile.id.id,
						image: profile.image || '/static/images/device-profile-placeholder.svg'
					}))

					// 为每个配置获取设备状态数量
					await Promise.all(profiles.map(async profile => {
						// 获取在线设备数量
						const activeResult = await request.get('/api/tenant/deviceInfos', {
							pageSize: 1,  // 只需要总数，所以设置为1
							page: 0,
							sortProperty: 'createdTime',
							sortOrder: 'DESC',
							deviceProfileId: profile.id,
							active: true
						})
						
						// 获取离线设备数量
						const inactiveResult = await request.get('/api/tenant/deviceInfos', {
							pageSize: 1,
							page: 0,
							sortProperty: 'createdTime',
							sortOrder: 'DESC',
							deviceProfileId: profile.id,
							active: false
						})
						
						// 更新设备数量
						profile.activeCount = activeResult.totalElements || 0
						profile.inactiveCount = inactiveResult.totalElements || 0
					}))

					this.deviceTypes = profiles
					
					// 计算总的活跃和非活跃设备数量
					this.calculateTotals()
				}
			} catch (error) {
				console.error('Failed to fetch device profiles:', error)
				uni.showToast({
					title: '获取设备配置失败',
					icon: 'none'
				})
			}
		},
		
		// 计算总数
		calculateTotals() {
			this.totalActive = this.deviceTypes.reduce((sum, type) => sum + type.activeCount, 0)
			this.totalInactive = this.deviceTypes.reduce((sum, type) => sum + type.inactiveCount, 0)
		},
		
		// 跳转到特定类型的设备列表
		goToDeviceList(name, deviceProfileId, active) {
			console.log('name:', name)
			console.log('deviceProfileId:', deviceProfileId)
			console.log('active:', active)	
			uni.navigateTo({
				url: `/pages/device/deviceList?name=${name}&deviceProfileId=${deviceProfileId}&active=${active}`
			})
		}
	}
}
</script>


